<template>
  <div>
    <!-- 
        菜单
           el-menu
               el-menu-item
                  默认插槽：菜单的icon图标
                  具名插槽：title  菜单文本内容
                  index:路由模式下点击后的path跳转地址
               router:是否使用路由模式，默认是false,如果想使用，设置它的值为true
                     点击子菜单项的跳转地址是对应的index的值
               :default-active="$route.path"
     -->
    <el-menu router>
      <el-menu-item index="/dashboard">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-menu-item index="/article">
        <i class="el-icon-setting"></i>
        <span slot="title">文章</span>
      </el-menu-item>
    </el-menu>
    <!-- 确定框
     el-popconfirm
         title:确定框的内容
         具名插槽reference：需要点击后提示确定框的内容
 -->
    <el-popconfirm title="您确定删除该项吗?" @confirm="confirm">
      <template #reference>
        <el-button>删除</el-button>
      </template>
    </el-popconfirm>
  </div>
</template>
<script>
export default {
  methods: {
    confirm () {
      this.$message.success('删除成功')
    }
  }
}
</script>
<style></style>
